<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">


    <script src="http://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


    <link rel="icon" href="../static/message/img/favicon.ico" type="image/x-icon" th:href="@{/message/img/favicon.ico}"/>

    <link rel="stylesheet" href="../static/message/css/message.css" th:href="@{/message/css/message.css}">

    <link rel="stylesheet" type="text/css" href="../static/css/header.css" th:href="@{/css/header.css}">

    <link rel="stylesheet" type="text/css" href="../static/css/layout.css" th:href="@{/css/layout.css}">

    <script src="../../static/js/header.js" th:src="@{/js/header.js}"></script>
</head>

<body style="background-color: white">
<div id="app">
    <div th:replace="common/header :: header"></div>

    <div id="message" >


        <div class="PU_content" style="margin: 0 auto;width: 50%;">
            <div class="wirte_box" style="padding-right: 10px;">
                <div class="zuijin_text">
                    最近联系
                </div>
                <div class="write_letter">
                    <button data-toggle="modal" data-target="#writeMessage" class="btn btn-primary btn-sm"
                            style="width:55px;height: 30px;">
                        写私信
                    </button>

                    <!-- 找私信模态框（Modal） -->
                    <div class="modal fade" id="writeMessage" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4>
                                        发送私信
                                    </h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>

                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                        <label for="exampleInputUser" style=" font-size: 14px;color: #666">发送给</label>
                                        <input type="user" class="form-control" id="exampleInputUser"
                                               aria-describedby="userHelp" placeholder="Enter username"
                                               style="width: 250px;float: none" onmouseout="checkUsername()">
                                        <small id="userHelp" class="form-text text-muted" style="color: red"></small>
                                        <br>
                                        <label for="exampleInputMessage" style="font-size: 14px;color: #666">内容</label>
                                        <textarea type="message" class="form-control" id="exampleInputMessage"
                                                  aria-describedby="messageHelp" placeholder="Enter message" onmouseout="checkMessage()"></textarea>
                                        <small id="messageHelp" class="form-text text-muted"></small>

                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                    </button>
                                    <button type="button" class="btn btn-primary" onclick="findReturn()">提交更改
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <!-- 找私信模态框（Modal） -->


                </div>
            </div>


            <!--       一个message            -->
            <div class="information" v-for="(message,index) in messages.data" v-model="messages[index]">
                <!-- message左侧 -->
                <div class="information_left">
                    <div class="information_left_img">
                        <img style="width: 100%;height: 100%;" v-bind:src="message.dp">
                    </div>
                </div>
                <!-- message右侧 -->
                <div class="information_right" style="padding:10px;">
                    <div class="information_right_author">
                        <span class="information_right_author_text">{{message.sendername}}</span>:亲爱的&nbsp;{{message.receivername}}
                    </div>
                    <!-- 右侧text -->
                    <div class="information_right_text">
                        {{message.content}}
                    </div>
                    <!-- 右侧底部操作 -->
                    <div class="information_right_bottom">
                        <!-- 时间 -->
                        <div class="information_right_bottom_time">
                            {{message.ctreatetime}}
                        </div>
                        <!-- 右下角操作 -->
                        <div class="information_right_bottom_do">
                            <a href="javascript:void(0)"
                               @click="lookmessage(message.senderid,message.receiverid)"
                               style="color: rgb(105, 142, 191);">
                                查看对话
                            </a> &nbsp;
                            <span style="color: rgb(187, 187, 187);">
                                    |
                                </span>
                            <a
                                    data-toggle="modal" data-target="#myModal1"
                                    href="javascript:void(0)"
                                    @click="returnMessageModel(message.sendername,message.receivername,message.senderid,message.receiverid)"
                                    style="color: rgb(105, 142, 191);">
                                &nbsp;回复&nbsp;
                            </a>

                            <!-- 回复模态框（Modal） -->
                            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h4 class="modal-title" id="myModalLabel">发送私信</h4>
                                        </div>
                                        <div class="modal-body">
                                            发送给&nbsp;:&nbsp;&nbsp;<span class="returnModel"
                                                                        id="returnSendername"></span>
                                            <br>


                                            <span>内容:</span><textarea id="content" class="form-control"
                                                                      rows="3"></textarea>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" onclick="sendReturn()">提交更改
                                            </button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal -->
                            </div>
                            <!-- 回复模态框（Modal） -->


                            <span style="color: rgb(187, 187, 187);">
                                    |
                                </span>
                            <a href="javascript:void(0)" style="color: rgb(105, 142, 191);"
                               @click="deleteMessage(message.id)">
                                &nbsp;删除
                            </a>

                        </div>
                    </div>
                </div>
                <div style="clear:both"></div>
            </div>
            <!--       一个message            -->
        </div>

        <div class="PU_footer">
            <div class="footer_zhihu">
                @2019知乎
            </div>
            <div class="footer_linktitle">
                <a href="https://liukanshan.zhihu.com/">刘看山</a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/question/19581624">知乎指南</a> &nbsp;•&nbsp;
                <a href="#">
                    建议反馈
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/app/">
                    移动应用
                </a> &nbsp;•&nbsp;
                <a href="https://app.mokahr.com/apply/zhihu/3819">
                    加入知乎
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/terms">
                    知乎协议
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/jubao">
                    举报投诉
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/term/privacy">
                    隐私政策
                </a> &nbsp;•&nbsp;
                <a href="https://www.zhihu.com/contact">
                    联系我们
                </a>
            </div>
        </div>

    </div>

</div>
<script src="http://code.jquery.com/jquery-3.4.1.js " integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin=" anonymous "></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js "></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
<script src="http://how2j.cn/study/axios.min.js"></script>

<script src="http://how2j.cn/study/fetch.min.js"></script>


<script>
    var username = getCookie('zhihu');
    var receiverid;
    $('#top_name').text(username);
    // var url = "http://localhost:8080/getMessage?username=" + username;
    var url = "http://localhost:8080/getNewMessage?username=" + username;

    function lookmessage(senderid, receiverid) {
        sessionStorage.setItem("swi", "0");
        var url1 = "http://localhost:8080/lookmessage?receiverid=" + receiverid + "&senderid=" + senderid;
        window.location = url1;

    }

    function getCookie(name) {
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");

        if (arr = document.cookie.match(reg))

            return unescape(arr[2]);
        else
            return null;
    }

    function sendReturn() {
        var senderid = $.cookie("zhihuid");
        // var receiverid = document.getElementById("memory").value;
        var content = document.getElementById("content").value;
        if (content!= "") {
            $.ajax({
                type: "get",
                data: {
                    "senderid": senderid,
                    "receiverid": this.receiverid,
                    "content": content
                },
                url: "http://localhost:8080/sendMessage",
                success: function (result) {
                    sessionStorage.setItem("swi", "0")
                    window.location = ("http://localhost:8080/message");

                }
            })
        }

    }

    function findReturn() {
        let userCheck = document.getElementById("userHelp").innerHTML;
        let contentfind = document.getElementById("exampleInputMessage").value;
        let receivernamefind = document.getElementById("exampleInputUser").value;
        let senderidfind = $.cookie("zhihuid");

        if(userCheck=="存在账号"){

            if(content!=""){


                $.ajax({
                    type:"get",
                    data:{
                        "senderid":senderidfind,
                        "content":contentfind,
                        "receivername":receivernamefind
                    },
                    url:"http://localhost:8080/findSendMessage",
                    success:function (result) {
                        sessionStorage.setItem("swi","0")
                        window.location=("http://localhost:8080/message");
                    }
                })

            }else alert("内容为空")
        }else alert("账号不存在")


    }

    function deleteMessage(id) {

        $.ajax({
            type: "post",
            data: {
                "id": id
            },
            url: "http://localhost:8080/deleteMessage",
            success: function (result) {
                sessionStorage.setItem("swi", "0");
                window.location.reload("http://localhost:8080/lookmessage?senderid=" + sessionStorage.getItem("senderid") + "&receiverid=" + sessionStorage.getItem("receiverid"));
            }


        })
    }

    function returnMessageModel(sendername, receivername, senderid, receiverid) {

        var username = $.cookie("zhihu");
        if (sendername == username) {
            // 如果本人发送others
            $("#returnSendername").text(receivername);
            this.receiverid = receiverid;


        } else {
            $("#returnSendername").text(sendername);
            this.receiverid = senderid;


        }


    }

    function checkUsername() {
        var username = document.getElementById("exampleInputUser").value;
        $.ajax({
            type: 'post',
            data: {
                "username": username
            },
            url: "http://localhost:8080/checkUsername",
            success: function (result) {
                if (result.data == null) {
                    $("#userHelp").text("不存在账号");
                } else {
                    $("#userHelp").css("color","#666");
                    $("#userHelp").text("存在账号");
                }
            }
        })
    }
    function checkMessage() {
        var message = document.getElementById("exampleInputMessage").value;
        if(test!=""){
            $("#messageHelp").text(" ");
        }
        else {
            $("#messageHelp").css("color","red");
            $("#messageHelp").text("内容不能为空");
        }
    }

    new Vue({
        el: '#app',
        data: {
            messages: [],
            users: []
        },
        created: function () {
            autodivheight();

            function autodivheight() { //函数：获取尺寸
                //获取浏览器窗口高度
                var winHeight = 0;
                if (window.innerHeight)
                    winHeight = window.innerHeight;
                else if ((document.body) && (document.body.clientHeight))
                    winHeight = document.body.clientHeight;
                //通过深入Document内部对body进行检测，获取浏览器窗口高度
                if (document.documentElement && document.documentElement.clientHeight)
                    winHeight = document.documentElement.clientHeight;
                //DIV高度为浏览器窗口的高度
                // document.getElementById("message").style.height = winHeight + "px ";
            }

            window.onresize = autodivheight; //浏览器窗口发生变化时同时变化DIV高度

            self = this
            fetch(url).then(function (response) {
                response.json().then(function (jsonObject) {
                    self.messages = jsonObject
                })
            }).catch(function (err) {
                console.log("Fetch错误:" + err);
            });
            //this.users =this.loadAll()
        },

        methods: {
            // loadAll(){
            //     return [
            //         { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
            //         { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
            //         { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
            //         { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
            //         { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
            //         { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
            //         { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
            //         { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
            //         { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },
            //         { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },
            //         { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },
            //         { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },
            //         { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },
            //         { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },
            //         { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },
            //         { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },
            //         { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },
            //         { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },
            //         { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },
            //         { "value": "枪会山", "address": "上海市普陀区棕榈路" },
            //         { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },
            //         { "value": "钱记", "address": "上海市长宁区天山西路" },
            //         { "value": "壹杯加", "address": "上海市长宁区通协路" },
            //         { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },
            //         { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },
            //         { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },
            //         { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },
            //         { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },
            //         { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },
            //         { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },
            //         { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },
            //         { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },
            //         { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },
            //         { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },
            //         { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },
            //         { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },
            //         { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },
            //         { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },
            //         { "value": "浏阳蒸菜", "address": "天山西路430号" },
            //         { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },
            //         { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },
            //         { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },
            //         { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },
            //         { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },
            //         { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },
            //         { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },
            //         { "value": "阳阳麻辣烫", "address": "天山西路389号" },
            //         { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }
            //     ];
            // },
            // querySearchAsync(queryString, cb) {
            //     let users = this.users;
            //     let results = queryString ? users.filter(this.createStateFilter(queryString)) : users;
            //
            //     clearTimeout(this.timeout);
            //     this.timeout = setTimeout(() => {
            //         cb(results);
            // }, 3000 * Math.random());
            // },
            // createStateFilter(queryString) {
            //     return (state) => {
            //         return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            //     };
            // },
            // handleSelect(item) {
            //     console.log(item);
            // }
        },

        mounted: {


            // lookmessage: function (senderid, receiverid) {
            //     var url = "http://localhost:8080/lookmessage.html?receiverid=" + receiverid + "&senderid=" + senderid;
            //     window.location = url;
            //
            // }
        }

    })
</script>
</body>

</html>